<template>
  <div class="test-cases">
    <el-container>
      <el-header>
        <div class="header-content">
          <h1>Smart API Tester</h1>
          <el-menu mode="horizontal" :default-active="activeIndex" router>
            <el-menu-item index="/">首页</el-menu-item>
            <el-menu-item index="/projects">项目管理</el-menu-item>
            <el-menu-item index="/test-cases">测试用例</el-menu-item>
            <el-menu-item index="/reports">测试报告</el-menu-item>
          </el-menu>
        </div>
      </el-header>
      <el-main>
        <div class="page-header">
          <h2>测试用例</h2>
          <div>
            <el-button type="success" @click="showImportDialog = true">
              <el-icon><upload /></el-icon>
              导入OpenAPI
            </el-button>
            <el-button type="primary" @click="showCreateDialog = true">
              <el-icon><plus /></el-icon>
              新建用例
            </el-button>
          </div>
        </div>
        
        <el-table :data="testCases" style="width: 100%">
          <el-table-column prop="name" label="用例名称" />
          <el-table-column prop="method" label="请求方法" width="100" />
          <el-table-column prop="url" label="请求URL" />
          <el-table-column prop="project_name" label="所属项目" />
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <el-button size="small" @click="runTestCase(scope.row)">执行</el-button>
              <el-button size="small" @click="editTestCase(scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="deleteTestCase(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 导入OpenAPI对话框 -->
        <el-dialog
          v-model="showImportDialog"
          title="导入OpenAPI规范"
          width="500px"
        >
          <el-form :model="importForm" label-width="100px">
            <el-form-item label="项目选择">
              <el-select v-model="importForm.projectId" placeholder="请选择项目">
                <el-option
                  v-for="project in projects"
                  :key="project.id"
                  :label="project.name"
                  :value="project.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="OpenAPI文件">
              <el-upload
                class="upload-demo"
                action="#"
                :auto-upload="false"
                :on-change="handleFileChange"
                :limit="1"
              >
                <el-button type="primary">选择文件</el-button>
                <template #tip>
                  <div class="el-upload__tip">
                    支持.json/.yaml/.yml格式的OpenAPI规范文件
                  </div>
                </template>
              </el-upload>
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="showImportDialog = false">取消</el-button>
              <el-button type="primary" @click="importOpenAPI">导入</el-button>
            </span>
          </template>
        </el-dialog>

        <!-- 创建/编辑测试用例对话框 -->
        <el-dialog
          v-model="showCreateDialog"
          :title="isEdit ? '编辑测试用例' : '新建测试用例'"
          width="600px"
        >
          <el-form :model="testCaseForm" label-width="100px">
            <el-form-item label="用例名称">
              <el-input v-model="testCaseForm.name" />
            </el-form-item>
            <el-form-item label="所属项目">
              <el-select v-model="testCaseForm.projectId" placeholder="请选择项目">
                <el-option
                  v-for="project in projects"
                  :key="project.id"
                  :label="project.name"
                  :value="project.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="请求方法">
              <el-select v-model="testCaseForm.method" placeholder="请选择请求方法">
                <el-option label="GET" value="GET" />
                <el-option label="POST" value="POST" />
                <el-option label="PUT" value="PUT" />
                <el-option label="DELETE" value="DELETE" />
                <el-option label="PATCH" value="PATCH" />
              </el-select>
            </el-form-item>
            <el-form-item label="请求URL">
              <el-input v-model="testCaseForm.url" />
            </el-form-item>
            <el-form-item label="请求头">
              <el-input v-model="testCaseForm.headers" type="textarea" rows="3" />
            </el-form-item>
            <el-form-item label="请求体">
              <el-input v-model="testCaseForm.body" type="textarea" rows="5" />
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="showCreateDialog = false">取消</el-button>
              <el-button type="primary" @click="saveTestCase">确定</el-button>
            </span>
          </template>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { Plus, Upload } from '@element-plus/icons-vue'

export default {
  name: 'TestCases',
  components: {
    Plus,
    Upload
  },
  setup() {
    const activeIndex = ref('/test-cases')
    const showImportDialog = ref(false)
    const showCreateDialog = ref(false)
    const isEdit = ref(false)
    const testCases = ref([
      {
        id: 1,
        name: '获取用户列表',
        method: 'GET',
        url: '/api/users',
        project_name: '示例项目'
      },
      {
        id: 2,
        name: '创建用户',
        method: 'POST',
        url: '/api/users',
        project_name: '示例项目'
      }
    ])
    
    const projects = ref([
      {
        id: 1,
        name: '示例项目'
      }
    ])
    
    const importForm = reactive({
      projectId: null,
      file: null
    })
    
    const testCaseForm = reactive({
      id: null,
      name: '',
      projectId: null,
      method: 'GET',
      url: '',
      headers: '',
      body: ''
    })

    const handleFileChange = (file) => {
      importForm.file = file.raw
    }

    const importOpenAPI = () => {
      console.log('导入OpenAPI:', importForm)
      showImportDialog.value = false
      importForm.projectId = null
      importForm.file = null
    }

    const runTestCase = (testCase) => {
      console.log('执行测试用例:', testCase)
    }

    const editTestCase = (testCase) => {
      isEdit.value = true
      testCaseForm.id = testCase.id
      testCaseForm.name = testCase.name
      testCaseForm.method = testCase.method
      testCaseForm.url = testCase.url
      showCreateDialog.value = true
    }

    const deleteTestCase = (testCase) => {
      console.log('删除测试用例:', testCase)
    }

    const saveTestCase = () => {
      if (isEdit.value) {
        console.log('编辑测试用例:', testCaseForm)
      } else {
        console.log('创建测试用例:', testCaseForm)
      }
      
      // 重置表单
      testCaseForm.id = null
      testCaseForm.name = ''
      testCaseForm.projectId = null
      testCaseForm.method = 'GET'
      testCaseForm.url = ''
      testCaseForm.headers = ''
      testCaseForm.body = ''
      showCreateDialog.value = false
      isEdit.value = false
    }

    return {
      activeIndex,
      showImportDialog,
      showCreateDialog,
      isEdit,
      testCases,
      projects,
      importForm,
      testCaseForm,
      handleFileChange,
      importOpenAPI,
      runTestCase,
      editTestCase,
      deleteTestCase,
      saveTestCase
    }
  }
}
</script>

<style scoped>
.test-cases {
  height: 100vh;
}

.el-header {
  background-color: #409EFF;
  color: white;
  padding: 0;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.header-content h1 {
  margin: 0;
  font-size: 24px;
}

.el-menu {
  background-color: transparent;
  border-bottom: none;
}

.el-menu-item {
  color: white;
  border-bottom: 2px solid transparent;
}

.el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.el-menu-item.is-active {
  border-bottom-color: white;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #303133;
}

.page-header div {
  display: flex;
  gap: 10px;
}
</style>